<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <!-- 1.解决移动端视口宽度和页面宽度不一致的问题 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 2.解决移动端误触造成的缩放问题，禁止用户缩放 -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 3.解决移动端元素尺寸的问题
        用JS代码来监听页面视口宽度的变化，从而导致根元素（html）字体大小发生变化，
        那么使用rem作为单位的尺寸也会跟着发生变化-->
    <script>
        /**
         * Created by lovo_bdk on 15-12-17.
         */
        !(function (win, doc) {
            function setFontSize() {
                var winWidth = window.innerWidth;
                doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
            }

            var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
            var timer = null;
            win.addEventListener(evt, function () {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }, false);
            win.addEventListener("pageshow", function (e) {
                if (e.persisted) {
                    clearTimeout(timer);
                    timer = setTimeout(setFontSize, 300);
                }
            }, false);
            //初始化
            setFontSize();
        }(window, document));
    </script>
    <!-- 5.换算比例：1rem=100px -->
    <!-- 6.写移动端，所有单位都是rem,以前是px的地方，都要换成rem -->
    <link rel="stylesheet" href="sass/news.css">
    <title>Title</title>
</head>
<body>
<div class="head">
    <div class="head1">
        <div class="head-left">
            <img src="imgs/logo-text-whitetext_v2.png" alt="">
        </div>
        <div class="head-right">
            <input type="button" class="sign" value="签到"/>
            <img class="download" src="imgs/下载.png">
        </div>
    </div>
    <div class="head2">
        <ul class="head2-content">
            <li>要闻
                <div class="line"></div>
            </li>
            <li>要闻
                <div class="line"></div>
            </li>
            <li>要闻
                <div class="line"></div>
            </li>
            <li>要闻
                <div class="line"></div>
            </li>

        </ul>
    </div>
    <div class="head3">
        <ul>
            <li>新闻</li>
            <li>体育</li>
            <li>娱乐</li>
            <li>财经</li>
            <li>军事</li>
            <li>本地</li>
        </ul>
        <ul>
            <li>推荐</li>
            <li>NBA</li>
            <li>CBA</li>
            <li>游戏</li>
            <li>汽车</li>
            <li>房产</li>
        </ul>
        <ul>
            <li>国际</li>
            <li>教育</li>
            <li>足球</li>
            <li>星座</li>
            <li>书城</li>
            <li>更多</li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="content-top">
        <div class="title-top">
            <p>习近平在陕西平利县考察脱贫攻坚情况</p>
            <span class="top">置顶</span>
            <i class="from">央视新闻客户端</i>
        </div>
        <div class="title-top">
            <p>总书记告诫的"大教训"是什么？</p>
            <span class="top">置顶</span>
            <i class="from">新华社新闻</i>
        </div>
        <div class="title-sub">
            <p>他们说，这是入党以来最自豪的一次"优先"</p>
            <i class="from">中国青年网</i>
        </div>
    </div>
    <div class="slider">
        <div class="subject"></div>
        <div class="subject"></div>
        <div class="subject"></div>
    </div>
</div>
</body>
</html>